<template>
    <div>
        <el-dialog :title="'设备: ' + deviceSn" :visible.sync="dialogVisible" width="530px" @close='close'
            :close-on-click-modal='false'>
            <div class="dialogBody">
                <el-form :inline="true" :model="form" size="mini" ref="form">
                    <el-form-item class="tableItem">
                        <gradeTable ref="table" @getRemoveIds='getRemoveIds' @handelTable='handelTable'
                            :deviceId='deviceId'></gradeTable>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="footer">
                <el-button size="mini" @click='dialogVisible = false'>取 消</el-button>
                <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改联络灯到人配置 -->
        <innerBox ref="innerBox" :lampTypeList='lampTypeList' :userOptions='userOptions' @getInnerInfo='getInnerInfo'></innerBox>
    </div>
</template>

<script>
    import gradeTable from './gradeTable.vue'
    import innerBox from './innerBox.vue'
    import {
        lampTypeDropDown,
        deviceLampTypeEdit
    } from '@/api/lampController'
    import {
        userListCopy
    } from '@/api/userController'
    export default {
        data() {
            return {
                form: {
                    deviceLampTypes:[],
                    removeIds:[]
                },
                lampTypeList:[],
                userOptions:[],
                dialogVisible: false,
                deviceSn:'',
                deviceId:null
            }
        },
        components:{
            gradeTable,
            innerBox
        },
        methods: {
            open(payload) {
                const {deviceSn,deviceId} = payload.row
                const {groupId} = payload
                this.deviceSn = deviceSn
                this.deviceId = deviceId
                this.$nextTick(()=>{
                    this.$refs.table.getDeviceLampDetailList({deviceId})
                    this.lampTypeDropDownFn({groupId})
                    this.getUserList({name:''})
                })
                this.dialogVisible = true
            },
            close() {
                this.form.removeIds = []
                this.$refs.form.resetFields()
            },
            //联络灯类型下拉
            lampTypeDropDownFn:async function(data){
                const res = await lampTypeDropDown(data)
                if (res.code == 200) {
                    this.lampTypeList = res.data
                }
            },
            //用户下拉
            getUserList: async function (data) {
                const res = await userListCopy(data)
                if (res.code == 200) {
                    this.userOptions = res.data
                }
            },
            //联络灯分级通知被移除的id
            getRemoveIds(id){
                this.form.removeIds.push(id)
            },
            //添加行
            handelTable(payload){
                this.$nextTick(() => {
                    this.$refs.innerBox.open(payload)
                })
            },
            //获取联络灯到人配置信息
            getInnerInfo(payload){
                this.$refs.table.updateTable(payload)
            },
            //编辑联络灯到人配置
            deviceLampTypeEditFn:async function(data){
                const res = await deviceLampTypeEdit(data)
                if (res.code == 200) {
                    this.$emit('updateList')
                    this.dialogVisible = false
                    this.utils.showMsg('编辑成功', 'success')
                }
            },
            //确定
            confirm() {
                this.form.deviceLampTypes = this.$refs.table.getTabelInfo()
                this.deviceLampTypeEditFn(this.form)
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-form-item--mini.el-form-item {
        width: 90%;

        /deep/ .el-form-item__content {
            width: 60%;
        }
    }

    .tableItem{
        /deep/ .el-form-item__content {
            width: 100% !important;
            padding-left: 20px;
            margin-top: 20px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 8px 10px 0 10px;

        .dialogBody {
            max-height: 520px;
            overflow-y: auto;
        }
    }

    /deep/ .el-dialog__footer {
        .footer {
            .el-button--mini {
                padding: 7px 30px;
            }
        }
    }
</style>